﻿@Scripts.Render("https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBW-tAI5fYfORgGNNVmtXoQthz3YDxl1C4&sensor=false&libraries=places")

 
<script>

    function timeConverter(UNIX_timestamp) {
        var timestmp = UNIX_timestamp.substring(6, 19);
        var a = new Date(timestmp * 1000);
        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
        var year = a.getFullYear();
        var month = months[a.getMonth()];
        var date = a.getDate();
        var hour = a.getHours();
        var min = a.getMinutes();
        var sec = a.getSeconds();
        var time = date + ',' + month;
        return time;
    }

</script>

<script>


    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    function initialize() {

        directionsDisplay = new google.maps.DirectionsRenderer();
        var iasi = new google.maps.LatLng(47.1666667, 27.6);
        //var brasov = new google.maps.LatLng(45.668285, 25.609703);
        var mapOptions = {
            zoom: 10,
            center: iasi
        }
        map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directions-panel'));

        calcRoute();

        function calcRoute() {

            var start = new google.maps.LatLng(currentTrip.InterestPoints[0].Lat, currentTrip.InterestPoints[0].Long);
            var end = new google.maps.LatLng(currentTrip.InterestPoints[currentTrip.InterestPoints.length - 1].Lat, currentTrip.InterestPoints[currentTrip.InterestPoints.length - 1].Long);

            var waypts = [];
            for (var i = 1; i < currentTrip.InterestPoints.length - 1; i++) {
                var pos = new google.maps.LatLng(currentTrip.InterestPoints[i].Lat, currentTrip.InterestPoints[i].Long);
                waypts.push({
                    location: pos,
                    stopover: true
                });

            }

            var request = {
                origin: start,
                destination: end,
                waypoints: waypts,
                optimizeWaypoints: true,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    var route = response.routes[0];
                    var summaryPanel = $(".payment-online-form-right");

                    // For each route, display summary information.
                    for (var i = 0; i < route.legs.length; i++) {
                        var routeSegment = i + 1;
                        summaryPanel.append('<b>Route Segment: ' + routeSegment + '</b><br>');
                        summaryPanel.append(route.legs[i].start_address + ' to ');
                        summaryPanel.append(route.legs[i].end_address + '<br>');
                        summaryPanel.append(route.legs[i].distance.text + '<br><br>');
                    }
                }
            });
        }
    }
    //google.maps.event.addDomListener(window, 'load', initialize);


</script>   
<script>
            
          function attendTrip() {

              var param = $("#tripID").text();
              var data = Object();
              data.param = param;

              $.ajax({
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  url: "http://localhost:58872/Trip/AttendTrip",
                  data: JSON.stringify(data),
                  dataType: "json",
                  success: function (data) {
                      if (data.Error) {
                          alert(data.Error)
                      } else {
                          //location.reload(true);
                          alert("ok");
                      }
                  },
                  error: function (result) {
                      alert("error");
                  }
              });
              getTripAttenders();
          }

    </script>
    
      <script>
          var currentTrip;
          function getCurrentTrip() {

              var param = $("#tripID").text();
              var data = Object();
              data.param = param;

              $.ajax({
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  url: "http://localhost:58872/trip/GetATrip",
                  data: JSON.stringify(data),
                  dataType: "json",
                  success: function (data) {
                      if (data.Error) {
                          alert(data.Error)
                      } else {
                          currentTrip = data;
                          var divplace = '<div class="image group"><div class="grid images_3_of_1"><img src="{0}" alt="" /><button  class="delete_button"/></div><div class="grid span_2_of_3"><h3><a href="#">{1}</a> </h3> </div><div class="clear"></div></div>';
                          var divtripname = '<a href="#"><h4>{2}</h4></a><p>{3}</p>';
                          var divtripauthor = '<a class="author" href="#">{4}</a>';
                          var divdate = '<span>{5}</span>';
                          for (i = 0; i < data.InterestPoints.length; i++) {
                              var divplace0 = divplace.replace("{0}", data.InterestPoints[i].Pictures);
                              var divplace1 = divplace0.replace("{1}", data.InterestPoints[i].Name);
                              $(".trip_places").append(divplace1);

                              //alert(divplace);                             
                          }
                          var divtripname0 = divtripname.replace("{2}", data.Name);
                          var divtripname1 = divtripname0.replace("{3}", data.Description);
                          $("#trip_title_descp").append(divtripname1);
                          var divtripauthor0 = divtripauthor.replace("{4}", data.Author.Name);
                          $("#authorname").append(divtripauthor0);
                          var divdate0 = divdate.replace("{5}", timeConverter(data.StartDay));
                          $("#tripdate").append(divdate0);

                          //map initialization
                          initialize();
                      }
                  },
                  error: function (result) {
                      alert(data.Error);
                  }
              });

          }

          $(document).ready(function () {
              getCurrentTrip();
          });
    </script>
    

      <script>
          function getTripAttenders() {

              var param = $("#tripID").text();
              var data = Object();
              data.param = param;

              $.ajax({
                  type: "POST",
                  contentType: "application/json; charset=utf-8",
                  url: "http://localhost:58872/trip/getTripAttenders",
                  data: JSON.stringify(data),
                  dataType: "json",
                  success: function (data) {
                      if (data.Error) {
                          alert(data.Error)
                      } else {
                          currentTrip = data;
                          var divplace = '<li><a href="Profile"><img src="../../Images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;" /> {0}</a></li>';
                          var divplace0 = divplace.replace("{0}", data.Name);
                              $("#getattenters").append(divplace0);

                              //alert(divplace);                             
                          }
                          //map initialization
                          
                      }
                  },
                  error: function (result) {
                      alert(data.Error);
                  }
              });

          }

          $(document).ready(function () {
              getTripAttenders();
          });
    </script>
    



    <script>
        function openWin() {
            window.open("http://localhost:58872/home/PhotoGallery", "width=600,height=600");
        }
    </script>




	<p id="tripID" style="display:none">@ViewBag.TripId</p>
	<div class="content_bottom">
		<!-- start sidebar_left   ---->
		<div class="sidebar_left">
		<div class="grid_1_of_2">
				<h4>Trip Places</h4>
				<div class="trip_places">
				<div class="clear"></div>
				<!--<div class="image group">
					<div class="grid images_3_of_1">
						<img src="../../Images/blog1.jpg" alt="" />
					</div>
					<div class="grid span_2_of_3">
						<h3><a href="#">Aldus PageMaker including versions of Lorem Ipsum.</a> </h3>
				   </div>
				   <div class="clear"></div>
			   </div>		
				<div class="image group">
					<div class="grid images_3_of_1">
						<img src="../../Images/blog2.jpg" alt="" />
					</div>
					<div class="grid span_2_of_3">
						<h3><a href="#">Aldus PageMaker including versions...</a> </h3>
				   </div>
				   <div class="clear"></div>
			   </div>
				<div class="image group">
					<div class="grid images_3_of_1">
						<img src="../../Images/blog3.jpg" alt="" />
					</div>
					<div class="grid span_2_of_3">
						<h3><a href="#">Aldus PageMaker including versions of Lorem Ipsum.</a> </h3>
				   </div>
				   <div class="clear"></div>
			   </div>
				<div class="image group">
					<div class="grid images_3_of_1">
						<img src="../../Images/blog4.jpg" alt="" />
					</div>
					<div class="grid span_2_of_3">
						<h3><a href="#">Aldus versions of Lorem Ipsum....</a> </h3>
				   </div>
				   <div class="clear"></div>
			   </div>			   			
				<div class="image group">
					<div class="grid images_3_of_1">
						<img src="../../Images/blog5.jpg" alt="" />
					</div>
					<div class="grid span_2_of_3">
						<h3><a href="#">Aldus PageMaker including versions of Lorem Ipsum.</a> </h3>
				   </div>
				   <div class="clear"></div>
			   </div>-->
			</div>	  
                <div class="attenders_title">
					<h4>Trip Details</h4>
				</div> 
			  <div id="attenders">
			  <div class="payment-online-form-right" >
						
						@*<ul>
							<li>
							    Length :			
							</li>
							<li>
								Time :		
							</li>
							<li>
							    Road Description : ( port, A,DN etc)
							</li>
							<li>
								Taxes : 	
  							</li>
							<li>
								Interdictions : 	
  							</li>
							
						</ul>*@
					</div>
				</div>
			  <div class="attenders_title">
					<h4>Attenders List</h4>
				</div> 
			  <div id="attenders">
			  <div class="payment-online-form-right" >
						
						<ul id="getattenders">
							<li>								
									<a href="Profile"><img src="../../Images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;" /> Friend 1</a></li>
							
                            <li>
									<a href="Profile"><img src="../../Images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;"/> Friend 2</a>
							</li>
							<li>
									<a href="Profile"><img src="../../Images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;" /> Friend 3</a>
							</li>
							<li>
									<a href="Profile"><img src="../../Images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;"/> Friend 4</a>
							</li>
							<li>
									<a href="Profile"><img src="../../Images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;"/> Friend 5</a>
							</li>
							<li>
									<a href="Profile"><img src="../../Images/profile-pic.png" alt="" style="width:50px; height:50px;padding-right:5px;"/> Friend 6</a>
							</li>
							
							
						</ul>
					</div>
				</div>
					<div class="clear"> </div>
				</div> 
			   
			   
			</div>
			
			
		</div>
		<!-- end sidebar_left   ---->
		<!-- start sidebar_right   ---->
		<div class="sidebar_right">
			<div class="span_1_of_3">
			<div class="span_1_of_3_img">
			 <div style="width:100%;height:400px" id="map-canvas"></div>	
                  <div>
                  </br>
                  <ul class="artical-related-info-row-right">
					 <li><a class="follow_button" onclick="attendTrip()" > Attend! </a></li>
			      </ul>

                  </div>
			
				<div class="clear"></div>
			</div>

			</div>
			<div style="width:100%;max-height:300px;overflow-y:auto; background-color:white" id="directions-panel"></div> 
			<div class="comments">
			<div class="blog-section">
				<div class="blog-artical">
					<div class="blog-artical-head">
						<a class="artical-date" href="#"><div id="tripdate"><!--<span>14</span><label>Aug</label>--></div></a>
					</div>
					<div class="artical-info">
						</br></br></br>
						<div id="trip_title_descp"><!--<a href="#"><h4>Lorem Ipsum is not simply roots in a piece</h4></a>
						<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</p> <p>making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>-->
                        </div>
					</div>
					<div class="artical-related-info">
						<div class="artical-related-info-row">
							
							<ul class="artical-related-info-row-right">
								<li id="authorname"><!--<a class="author" href="#">Jhone Deo</a>--></li>
								<!--<li><a class="articl-readmore" href="javascript:openWin()">Photo Gallery</a></li>-->
                                <li><a class="articl-readmore" href="javascript:q=(document.location.href);void(open('http://localhost:58872/home/PhotoGallery','_self','resizable,location,menubar,toolbar,scrollbars,status'));">Photo Gallery</a></li>
							</ul>
							<div class="clear"> </div>
						</div>
					</div>
					
				</div>	
				<!---//Blog comments and news----->
			
			<div class="clear"> </div>
			<!---start-comment-section----->
			<div class="comment-section">
				<div class="comment-box">
					<div class="comment-people-pic">
						<a href="#"><img src="../../Images/comment-people1.png" alt="" /></a>
					</div>
					<div class="comment-info">
						<div class="comment-info-head">
							<div class="comment-info-head-left">
								<a href="Profile">John Deo</a>
							</div>
							<div class="comment-info-head-right">
								<ul>
									<li><a class="date-of-post" href="#">August 7,2013</a></li>
									<li><a class="replay" href="#">Replay</a></li>
								</ul>
							</div>
							<div class="clear"> </div>
							<div class="comment-place">
									<p>it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</p>
							</div>
							<div class="clear"> </div>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
				<div class="comment-box-replay">
					<div class="comment-box-replay-icon">
						<a href="#"><img src="../../Images/replay.png" alt="" />
					</div>
					<div class="comment-box-replay-box">
					<div class="comment-people-pic replay-pic">
						<a href="#"><img src="../../Images/comment-people2.png" alt="" /></a>
					</div>
					<div class="comment-info replay-comment-info">
						<div class="comment-info-head">
							<div class="comment-info-head-left">
								<a href="#">John Deo</a>
							</div>
							<div class="comment-info-head-right">
								<ul>
									<li><a class="date-of-post" href="#">August 7,2013</a></li>
									<li><a class="replay" href="#">Replay</a></li>
								</ul>
							</div>
							<div class="clear"> </div>
							<div class="comment-place">
									<p>it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</p>
							</div>
							<div class="clear"> </div>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
				<div class="clear"> </div>
			</div>
			<div class="comment-box-replay">
					<div class="comment-box-replay-icon">
						<a href="#"><img src="../../Images/replay.png" alt="">
					</a></div><a href="#">
					</a><div class="comment-box-replay-box comment-box-replay-box-replay-to"><a href="#">
					</a><div class="comment-people-pic replay-pic"><a href="#">
						</a><a href="#"><img src="../../Images/comment-people3.png" alt=""></a>
					</div>
					<div class="comment-info replay-comment-info">
						<div class="comment-info-head">
							<div class="comment-info-head-left">
								<a href="#">John Deo</a>
							</div>
							<div class="comment-info-head-right">
								<ul>
									<li><a class="date-of-post" href="#">August 7,2013</a></li>
									<li><a class="replay" href="#">Replay</a></li>
								</ul>
							</div>
							<div class="clear"> </div>
							<div class="comment-place">
									<p>it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</p>
							</div>
							<div class="clear"> </div>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
				<div class="clear"> </div>
			</div>
			<div class="comment-box-replay">
					<div class="comment-box-replay-icon comment-box-replay-icon-right">
						<a href="#"><img src="../../Images/replay-right.png" alt="" />
					</div>
					<div class="comment-box-replay-box comment-box-replay-box-left">
					<div class="comment-people-pic replay-pic">
						<a href="#"><img src="../../Images/comment-people4.png" alt="" /></a>
					</div>
					<div class="comment-info replay-comment-info">
						<div class="comment-info-head">
							<div class="comment-info-head-left">
								<a href="#">John Deo</a>
							</div>
							<div class="comment-info-head-right">
								<ul>
									<li><a class="date-of-post" href="#">August 7,2013</a></li>
									<li><a class="replay" href="#">Replay</a></li>
								</ul>
							</div>
							<div class="clear"> </div>
							<div class="comment-place">
									<p>it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</p>
							</div>
							<div class="clear"> </div>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
				<div class="clear"> </div>
			</div>
			<div class="comment-box">
					<div class="comment-people-pic">
						<a href="#"><img src="../../Images/comment-people5.png" alt="" /></a>
					</div>
					<div class="comment-info">
						<div class="comment-info-head">
							<div class="comment-info-head-left">
								<a href="#">John Deo</a>
							</div>
							<div class="comment-info-head-right">
								<ul>
									<li><a class="date-of-post" href="#">August 7,2013</a></li>
									<li><a class="replay" href="#">Replay</a></li>
								</ul>
							</div>
							<div class="clear"> </div>
							<div class="comment-place">
									<p>it is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here',</p>
							</div>
							<div class="clear"> </div>
						</div>
					</div>
					<div class="clear"> </div>
				</div>
		</div>
		</div>
			</div>
			
			
		</div>	
		<!-- end sidebar_right   ---->
		</div>	
		<!-- end bottom_style   ---->
		<div class="clear"></div>
		</div>
<!-- end wrapper   ---->
	</div>
</div>


